/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
$(document).ready(function()
{
    //----------------------- CENTRAR DIVS --------------------------------------
    
    $(window).resize(function(){
          $('#light').css({
               left: ($(window).width() - $('#light').outerWidth())/2
//               top: ($(window).height() - $('#light').outerHeight())/2
          });

	});

// Ejecutamos la función
$(window).resize()
    
    
    
	$(".tab_content").hide();
	$("ul.tabs-modal li:first").addClass("active").show();
	$(".tab_content:first").show();
        //para que se seleccione el primer boton de zonas
         $("ul.zonas li:first ").addClass("opcion_on");
         //para que se seleccione el primer boton de actividades
         $("ul.actividades li:first ").addClass("opcion_on");
         //seteo nombre de zona seleccionada
         $('#nombreZona').html("Usted a posicionado en: "+ $('ul.zonas li:first').find("p").text());
         //seteo el nombre de la actividad seleccionada
         
          
        //bindeo el click del tab, cuando se haga click en cualquier li se ejecuta lo de adentro
	$("ul.tabs-modal li").click(function()
       {        
               
                //se saca el tab activo
		$("ul.tabs-modal li").removeClass("active");
                //al li que clickeamos se lo pone como activo
		$(this).addClass("active").show();
                //se oculta el contenido del otro li
		$(".tab_content").hide();
                //se toma el objeto onclick del tag a y se lo guarda para luego 
                //comparar segun sea y colocar el id del tab que queremos mostrar
		var activeTab = $(this).find("a").attr("onClick");
               
                if(activeTab == 'javascript:cambiarTab(1)'){
                    activeTab = "#tab1";
                }else if(activeTab == 'javascript:cambiarTab(2)'){
                //cuando cambiar la pestaña setea el nombre de esta abajo y el nombre de la zona que anteriormente selecciono
                 $('#nombreActividad').html($('#nombreZona').html()+ " "+$(this).find("a").text());
                    activeTab = "#tab2";
                }else if(activeTab == 'javascript:cambiarTab(3)'){
                 //cuando cambiar la pestaña setea el nombre de esta abajo y el nombre de la zona que anteriormente selecciono
                 $('#nombreActividad2').html($('#nombreZona').html()+ " "+$(this).find("a").text());
                    activeTab = "#tab3";
                }else if(activeTab == 'javascript:cambiarTab(4)'){
                   //cuando cambiar la pestaña setea el nombre de esta abajo y el nombre de la zona que anteriormente selecciono
                 $('#nombreActividad3').html($('#nombreZona').html()+ " "+$(this).find("a").text());   
                    activeTab = "#tab4";
                }else if(activeTab == 'javascript:cambiarTab(5)'){
                 //cuando cambiar la pestaña setea el nombre de esta abajo y el nombre de la zona que anteriormente selecciono
                 $('#nombreActividad4').html($('#nombreZona').html()+ " "+$(this).find("a").text());
                    activeTab = "#tab5";
                }
                //mostramos el tab con el id segun la comparacion
		$(activeTab).fadeIn();
		return false;
	});
        //bindeamos el evento del click de las zonas
        $("ul.zonas li").click(function()
       {
           $("ul.zonas li ").removeClass("opcion_on");
           $("ul.zonas li ").addClass("opcion_off");
           
           $(this).addClass("opcion_on");
            var nombreZona = $(this).find("p").text();
            $('#nombreZona').html('Usted está posicionado en: '+nombreZona);
       });
       $("ul.actividades li").click(function()
       {
           $("ul.actividades li ").removeClass("opcion_on");
           $("ul.actividades li ").addClass("opcion_off");
           
           $(this).addClass("opcion_on");
       });
        
      //al iniciar llamamos la funcion para colocar las imagenes de fondo al tab  
    cambiarTab('1');    
});

function mostrarVentanaModal(){
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';
}

function cerrarVentanaModal(){
    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none';
}

function cambiarTab(tab){

    if(tab == '1'){
        $('#tab1').show();
        document.getElementById("izquierda").style.backgroundImage = "url(img/img/bg_asistente_izquierda_on.gif)";
        document.getElementById("medio1").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
        document.getElementById("medio2").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
        document.getElementById("medio3").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
        document.getElementById("derecha").style.backgroundImage = "url(img/img/bg_asistente_derecha_off.gif)";
    }   
    else if(tab == '2'){
        $('#tab2').show();
        document.getElementById("medio1").style.backgroundImage = "url(img/img/bg_asistente_centro_on.gif)";
        document.getElementById("medio2").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
        document.getElementById("medio3").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
        document.getElementById("derecha").style.backgroundImage = "url(img/img/bg_asistente_derecha_off.gif)";
        document.getElementById("izquierda").style.backgroundImage = "url(img/img/bg_asistente_izquierda_off.gif)";
    }
    else if(tab == '3'){
        $('#tab3').show();
        document.getElementById("medio1").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
        document.getElementById("medio2").style.backgroundImage = "url(img/img/bg_asistente_centro_on.gif)";
        document.getElementById("medio3").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
        document.getElementById("derecha").style.backgroundImage = "url(img/img/bg_asistente_derecha_off.gif)";
        document.getElementById("izquierda").style.backgroundImage = "url(img/img/bg_asistente_izquierda_off.gif)";
    }
    else if(tab == '4'){
        $('#tab4').show();
        document.getElementById("derecha").style.backgroundImage = "url(img/img/bg_asistente_derecha_off.gif)";
        document.getElementById("izquierda").style.backgroundImage = "url(img/img/bg_asistente_izquierda_off.gif)";
        document.getElementById("medio1").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
        document.getElementById("medio2").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
        document.getElementById("medio3").style.backgroundImage = "url(img/img/bg_asistente_centro_on.gif)";
    }
    else if(tab == '5'){
        $('#tab5').show();
        document.getElementById("derecha").style.backgroundImage = "url(img/img/bg_asistente_derecha_on.gif)";
        document.getElementById("izquierda").style.backgroundImage = "url(img/img/bg_asistente_izquierda_off.gif)";
        document.getElementById("medio1").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
        document.getElementById("medio2").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
        document.getElementById("medio3").style.backgroundImage = "url(img/img/bg_asistente_centro_off.gif)";
    }
}

function changeDepto(){
    
}